<template>
  <div class style="height: 100%;pointer-events: none;">
    <div
      v-show="showInfo && showInfocam"
      class="cardnengliudiv"
      :style="{ left: (winPos[0] - 180) + 'px', bottom: (winPos[3] - 20 ) + 'px' }"
    >
      <div class="cardnengliudivinner">
        <div style="position: absolute;left: 40px;top: 15px;">{{options.id}}</div>
        <div style="position: absolute;left: 30px;top: 60px;">
          <span style="color: #50C9FF; padding: 0px 5px;">用电量</span>
          <span>1366 kWh</span>
        </div>
        <div style="position: absolute;left: 30px;top: 95px;">
          <span style="color: #50C9FF; padding: 0px 5px;">用气量</span>
          <span>1366 t/h</span>
        </div>
        <div style="position: absolute;left: 30px;top: 130px;">
          <span style="color: #50C9FF; padding: 0px 5px;">用水量</span>
          <span>1366 t/h</span>
        </div>
        <div style="position: absolute;left: 30px;top: 160px;">
          <span style="color: #50C9FF; padding: 0px 5px;">产量</span>
          <span>1366 个</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import uuidv1 from "uuid/v1";

import echarts from "echarts";

export default {
  name: "cardmsglinglong",
  props: {
    diahtml: "",
    options: {},
  },
  components: {},
  data() {
    return {
      winPos: [0, 0, 0, 0],
      showInfo: false,
      showInfocam: false,
      uniqueID: "",
    };
  },
  computed: {},
  created() {
    this.uniqueID = uuidv1();
  },
  watch: {
    winPos: {
      handler: function (n, o) {
        //判断位置与窗口偏移

        let width = document.documentElement.clientWidth;
        let height = document.documentElement.clientHeight;

        let offwidth = n[0];
        let offheight = n[1];

        let reswidth = width - offwidth;
        let resheight = height - offheight;

        if (
          reswidth < 120 ||
          resheight < 20 ||
          reswidth > width ||
          resheight > height
        ) {
          this.showInfo = false;
        } else {
          this.showInfo = true;
          // this.loadchart();
        }
      },
    },
  },
  mounted() {
    let earth = this.$root._earth;
    let _this = this;

    this.$root._earth.sceneTree.root.children.push({
      ref: this.options.uid,
      czmObject: {
        name: "Pin1",
        xbsjType: "Pin",
        position: [1.9017005694855162, 0.5972477268978722, 488.7695178987821],
        near: 0,
        show: true,
        lineShow: true,
        scale: 0.0001,
        lineHeight: 100,
      },
    });

    let position = [
      this.options.position[0],
      this.options.position[1],
      this.options.position[2] + 180,
    ];

    // this.$parent.pinarr.push(this.options.uid);
    let pin1 = this.$root._earth.sceneTree.$refs[this.options.uid].czmObject;
    pin1.position = position;
    XE.MVVM.track(this, "winPos", pin1, "winPos");

    pin1.disposers.push(
      XE.MVVM.watch(
        () => ({
          enabled: pin1.enabled,
          position: [...earth.camera.position],
        }),
        () => {
          // xepd: xepositionDistance的缩写
          // pin1.position.xepd(earth.camera.position): 计算相机和pin之间的距离
          const d = pin1.position.xepd(earth.camera.position);
          if (d > 4000 && pin1.enabled) {
            _this.showInfocam = false;
            pin1.show = false;
          } else {
            pin1.show = true;
            _this.showInfocam = true;
          }
        }
      )
    );
  },
  methods: {
    loadchart() {},

    closebox() {
      //删除pin数组
      // let pinarr = _.cloneDeep(this.$parent.pinarr);
      // pinarr.map((item, index) => {
      //   if (item == this.options.uid) {
      //     this.$parent.pinarr.splice(index, 1);
      //   }
      // });
      //删除_earth.children对象
      this.$root._earth.sceneTree.root.children.map((eactpin, index) => {
        if (eactpin.ref == this.options.uid) {
          this.$root._earth.sceneTree.root.children.splice(index, 1);
        }
      });

      // let earthchild = this.$root._earth.sceneTree.root.children.map(item =>{
      //   return item.ref
      // })
      // console.log(earthchild);

      // earthchild.map((eactpin, index) => {
      //   if (eactpin == this.options.uid) {
      //     this.$root._earth.sceneTree.$refs[this.options.uid].destroy()
      //     // this.$root._earth.sceneTree.root.children.splice(index, 1);
      //   }
      // });

      //删除msgbox数组对应元素
      let msgboxarr = _.cloneDeep(this.$parent.cardnengliuarr);
      msgboxarr.map((item, index) => {
        if (item.uid == this.options.uid) {
          this.$parent.cardnengliuarr.splice(index, 1);
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.cardnengliudiv {
  .cardnengliudivinner {
    background-image: url("/configuration/cesium//linglong/changqu.png");
    width: 170px;
    height: 180px;
    color: white;
    background-size: 100% 100%;
    padding: 5px;
    border-radius: 5px;
  }
  background-color: #11183caa;
  padding: 5px;
  //  position: relative;
  //  width: 180px;
  //  height: 190px;
  position: absolute;
  // cursor: pointer;
}
</style>